<!--新增功能，上半部分表单-->
<template>
  <dir class="uploadAll-box">
    <div v-if="!pageTypeObj.disabled">
      <div class="uploadBox">
        <el-upload
          class="dialog-upload"
          action="string"
          :show-file-list="false"
          accept="application/pdf"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeUpload"
          :http-request="toRequest"
          fit="scale-down"
        >
          <el-button
            size="mini"
            type="text text-primary">上传</el-button>
        </el-upload>
      </div>
      <div class="itemText">
        <span>{{ title }}</span>
      </div>
      <div class="itemTips">
        <span>{{ pageTypeObj.placeholder }}</span>
      </div>
    </div>
    <div v-else>
      <el-button
        size="mini"
        type="text text-primary"
        @click="downloadMethod(detailsUploadUrl)">下载</el-button>
    </div>

  </dir>
</template>

<script>
import { fileUpload } from '../../const/api.js'
import { fitType } from '../../const/common.js'
import { without } from 'lodash'
import { setImmediate } from 'timers'
// 文件上传限制 ------- 图片类型
const imageLimit = 'application/pdf'
export default {
  name: 'PictureUpload',
  props: {
    // 接收默认url
    imgsrc: {
      type: String,
      default: () => ''
    },
    // 跟单独调用没有关系，该值为了配合表单组件使用
    keystr: {
      type: String,
      default: () => ''
    },
    // 类型
    uptype: {
      type: String,
      default: () => ''
    },
    // PDF
    title: {
      type: String,
      default: () => ''
    },
    // 页面状态
    pageType: {
      type: Object,
      default: () => {}
    }
  },

  data () {
    return {
      fileName: '',
      // 类型
      type: this.uptype || '',
      // 该值为了配合表单组件使用
      key: this.keystr || '',
      // 图片填充行为
      fitType,
      // 上传的地址
      uploadUrl: fileUpload,
      // 详情路径
      detailsUploadUrl: this.imgsrc || '',
      // 设置默认内容
      pageTypeObj: {}
    }
  },

  methods: {
    // 下载
    downloadMethod (detailsUploadUrl) {
      window.open(detailsUploadUrl)
    },

    // 上传图片成功 本地图片地址
    handleAvatarSuccess (res, file) {
      this.localImgurl = URL.createObjectURL(file.raw)
    },

    // 点击上传
    beforeUpload (file) {
      // 图片拦截
      // const isJPG = file.type.includes(imageLimit)
      // if (!isJPG) {
      //   this.$message.error('上传附件只能是PDF格式!')
      //   return false
      // }
      const isLt2M = file.size / 1024 / 1024 < 3
      if (!isLt2M) {
        this.$message.error('上传附件大小不能超过 3MB!')
        return false
      }
      this.fileName = file.name
    },

    toRequest (data) {
      // 发起请求
      let fd = new FormData()
      fd.append('file', data.file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd
      }).then(res => {
        this.$message({ type: 'success', message: '上传成功' })
        // 赋值上传后的地址给文档
        if (this.type === '1') {
          this.imagesurlarr.push(res.data.payload)
          this.$emit('ReturnImgUrl', this.imagesurl, this.key)
        } else {
          this.detailsUploadUrl = res.data.payload
          this.$emit('ReturnImgUrl', this.detailsUploadUrl, this.key, this.fileName)
        }
      })
    }
  },

  watch: {
    imgsrc: {
      immediate: true,
      handler (val) {
        // console.log('val',val)
        this.detailsUploadUrl = val
      }
    },
    title: {
      immediate: true,
      handler (val) {
        this.fileName = val
      }
    },
    pageType: {
      immediate: true,
      handler (val) {
        this.pageTypeObj = val
      }
    }
  }
}
</script>

<style lang="less">
.uploadAll-box {
  position: relative;
  width: 211px;
  padding: 0;
  display: flex;

  .uploadBox {
    width: 30px;
  }

  .itemText {
    position: absolute;
    top: 2px;
    left: 34px;
    width: 183px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .itemTips {
    position: absolute;
    top: 21px;
    left: -62px;
    font-size: 10px;
  }
}
</style>
